<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="提现记录" />
    </template>
    <view class="content">
      <view
        :class="{ 'width-border': this.date }"
        class="brief flex flex-bt fs-32"
      >
        <view>
          <text class="c-60">总计：</text>
          <text class="c-90">￥{{ total }}</text>
        </view>
        <view class="filter fs-28 c-90" @click="isShowFilter = true">
          {{ date }}
        </view>
      </view>
      <scroll-view
        :style="statusBarHeight"
        class="list scroll-view"
        :scroll-y="true"
        @scroll="onScroll"
      >
        <view v-for="(item, i) in list" :key="i" class="item">
          <view
            :data-date="item.date"
            :data-id="i"
            class="target-element date flex flex-a c-90"
          >
            <text class="num bold">{{ item.date }}</text>
            <text class="unit fs-28 c-90">月</text>
            <u-icon name="arrow-down-fill" color="#959595" size="16"></u-icon>
          </view>
          <view v-for="(item2, i2) in item.list" :key="i2" class="list-item">
            <view class="num flex flex-bt flex-a">
              <view class="flex flex-a">
                <image src="../../../assets/images/setting/remain.png"></image>
                <text class="fs-32 c-60">到账账户</text>
              </view>
              <text
                class="fs-32 bold c-90"
                :class="{ 'active-text': item2.status == 1 }"
              >
                {{ item2.money }}
              </text>
            </view>
            <view class="name fs-32 c-90 flex flex-bt">
              <text>
                {{ item2.bankName }}（{{ hideNumber(item2.accountNumber) }}）
              </text>
              <text
                class="fs-24"
                :class="{
                  'active-text': item2.status == 1,
                  'fail-text': item2.status == 0,
                }"
                >{{
                  item2.status == 0
                    ? "提现失败"
                    : item2.status == 1
                    ? "提现成功"
                    : "提现中"
                }}</text
              >
            </view>
            <view class="dt c-40 fs-24">发起时间  {{ item2.dateBegin }}</view>
            <view class="dt c-40 fs-24">到账时间  {{ item2.dateEnd }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { statusBarHeight } from "../../../assets/utils/config.js";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      statusBarHeight,
      title: "已结算订单",
      type: 1,
      total: 123456.93,
      date: "",
      isShowFilter: false,
      withBorder: false,
      list: [...new Array(5)].map((_, i) => {
        return {
          date: `${i + 1}`,
          list: [...new Array(i+1)].map((_,i2)=>{
            return {
              money: 123456,
              status: i2 % 2 == 0 ? 0 : i2 % 3 == 0 ? 2 : 1,
              bankName: "中国建设银行",
              accountNumber: "123456789123",
              dateBegin: "2024-03-02 20:06:02",
              dateEnd: "2024-03-02 20:06:02",
            }
          }),
        };
      }),
    };
  },

  onLoad(d) {
    console.log(d);
    this.type = d.type;
  },
  onPageScroll({ scrollTop }) {
    console.log(scrollTop);
  },
  methods: {
    hideNumber(num) {
      return "********" + num.substring(num.length - 4);
    },
    onScroll(e) {
      const query = uni.createSelectorQuery().in(this);
      query
        .selectAll(".target-element")
        .boundingClientRect((data) => {
          data.forEach((item) => {
            const top = parseInt(this.statusBarHeight) + 106;
            if (item.top < top) {
              this.date = item.dataset.date + "月";
            }
            if (item.top >= top && item.dataset.id == 0) {
              this.date = "";
            }
          });
        })
        .exec();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
@statusbarheight:var (--statusBarHeight);
.content {
  //   padding: 0 32rpx 32rpx 32rpx;
  background: #f7f8ff;
  height: 100%;
  overflow: hidden;
  .brief {
    padding: 32rpx;
    position: sticky;
    top: 0;
    background: #f7f8ff;
    z-index: 999;
    height: 56px;
    width: 100%;
  }
  .width-border {
    border-bottom: 1px solid #e9e9ea;
  }
}
.scroll-view {
  height: calc(100vh - 300rpx);
  border-radius: 16rpx;
  padding: 0 32rpx;
  overflow: hidden;
  .item {
    background: #ffffff;
    padding: 32rpx 32rpx 0 32rpx;
    .date {
      .num {
        font-size: 48rpx;
      }
      .unit {
        margin: 0 10rpx 0 4rpx;
      }
    }
    &:nth-child(1) {
      border-radius: 16rpx 16rpx 0 0;
    }

    .list-item {
      border-bottom: 1px solid #e9e9ea;
      margin-top: 24rpx;
      padding-top: 8rpx;
      padding-bottom: 32rpx;
      image {
        width: 46rpx;
        height: 41rpx;
        margin-right: 6rpx;
      }
      .name {
        margin: 22rpx 0;
      }
      .dt {
        margin-top: 8rpx;
      }
      .fail-text{
        color:#FC1313;
      }
    }
  }
}
</style>
